<template>
    <div class="flex   justify-start items-center border-b">
        <i v-if="toggle" class="el-icon-s-fold cursor-pointer p-4
 hover:bg-gray-100 focus:ring-opacity-50" @click="change"></i>
        <i v-else class="el-icon-s-unfold cursor-pointer p-4
 hover:bg-gray-100 focus:ring-opacity-50" @click="change"></i>
        <el-tag v-for="(route,index) in routes" :key="index" :type="route.name==$route.name?'success':'info'"
                class="ml-1 cursor-pointer"
                closable
                effect="plain"
                size="small"
                @click="$router.push(route)"
                @close="handleClose(route)"
        >
            <span v-show="route.name==$route.name">▪</span>
            {{ route.title }}
        </el-tag>
    </div>
</template>

<script>
export default {
    props: {
        num: {type: Number, default: 15},
    },
    data() {
        return {
            routes: [],
            toggle: true //菜单折叠
        }
    },
    watch: {
        $route(route) {
            if (route.meta.title && !Object.keys(route.params).length && !Object.keys(route.query).length) {
                const has = this.routes.some(r => r.name == route.name)
                if (!has) {
                    this.routes.push({name: route.name, title: route.meta.title})
                    if (this.routes.length > this.num) {
                        this.routes.shift()
                    }
                }
            }
        }
    },
    methods: {
        handleClose(route) {
            this.routes.splice(this.routes.indexOf(route), 1);
        },
        change() {
            this.$emit('updatefold', this.toggle)
            this.toggle = !this.toggle
        }
    }
}
</script>

<style scoped>
.el-icon-s-fold {
    font-size: 20px;
}
.el-icon-s-unfold {
    font-size: 20px;
}
</style>
